<template>
  <div id="g6TreeNode" ref="g6TreeNode"
      :style="'width:'+width+';height: '+height"></div>
</template>
<script>
import G6 from '@antv/g6';

export default {
  name: "yqArticleChartCircleG6",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    treeData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    initG6() {
      let g6TreeNode = this.$refs.g6TreeNode;
      let width = g6TreeNode.scrollWidth;
      let height = g6TreeNode.scrollHeight;
      const treeGraph = new G6.TreeGraph({
        container: 'g6TreeNode',
        width,
        height,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const data = item.get('model').data;
                data.collapsed = collapsed;
                return true;
              }
            },
            'drag-canvas',
            'zoom-canvas',
          ],
        },
        // 节点设置
        defaultNode: {
          size: 10,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
          style: {
            fill: '#fff',
            stroke: 'grey'
          },
        },
        // 连线设置
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: 'grey',
          },
        },
        // 布局
        layout: {
          type: 'mindmap',
          direction: 'H',
          getHeight: () => {
            return 15;
          },
          getWidth: () => {
            return 5;
          },
          getVGap: () => {
            return 0;
          },
          getHGap: () => {
            return 100;
          },
          getSide: (node) => {
            return Number(node.data.title.substr(0, 2)) > 3 ? 'left' : 'right';
          }

        },
      });
      let centerX = 0;
      treeGraph.node(function (node) {
        if (node.id === '文章') {
          centerX = node.x;
        }

        return {
          label: node.title,
          labelCfg: {
            style: {
              fill: '#fff',
            },
            position:
                node.children && node.children.length > 0
                    ? 'right'
                    : node.x > centerX
                    ? 'right'
                    : 'left',
            offset: 7,
          },
        };
      });
      // 为图上的所有节点绑定点击监听
      treeGraph.on('node:click', evt => {
        // const item = evt.item; // 被操作的节点 item
        const target = evt.target; // 被操作的具体图形
        console.log(target)
      });
      treeGraph.data(this.treeData);
      treeGraph.render();
      treeGraph.fitView();
    }
  },
}
</script>
<style scoped lang='scss'>

</style>
